<template>
	<view class="select-goods" v-for="(item,index) in data.goods" :key="index" @click="select(item)">
		<view >
			<image :src="item.goods_cover" mode="aspectFill"></image>
		</view>
		<view>
			<text class="over-text line-clamp" :style="{color:(item.relation ? '#f2f2f2' : '')}">{{item.goods_title}}</text>
			<text :style="{color:(item.relation ? '#f2f2f2' : '')}">¥{{item.goods_price}}</text>
		</view>
	</view>
	<!-- 加载效果 -->
	<uni-load-more :status="load.status" :contentText="load.contentText" v-show="load.isShow"></uni-load-more>
	<view style="height: 100rpx;"></view>
	
	<!-- 没有数据的提示 -->
	<view class="Tips" v-show="data.goods.length==0">还没有商品数据</view>
</template>

<script setup>
	import {onMounted,reactive,ref,watch} from 'vue'
	import {init} from '@/Acc-config/init.js'
	import {onReachBottom,onLoad} from '@dcloudio/uni-app'
	
	onMounted(()=>{
		getData()
	})
	
	// 存储商品数据
	const data=reactive({
		goods:[]
	})
	
	// 需要查询的字段
	let obj = {goods_title:true,goods_cover:true,goods_price:true,video_url:true,seckill:true}
	async function getData(){
		let db=await init()
		// 查询出已经上架的商品
		const result=await db.database().collection('goods').where({shelves:true}).limit(7).field(obj).get()
		data.goods=result.data
	}
	
	// 加载效果配置
	const load=reactive({
		status:'more',//加载效果样式,
		contentText:{
			contentdown: "上拉显示更多数据",
		},
		isShow:false
	})
	// 上拉加载
	let page=reactive(0)//当前页码
	onReachBottom(async ()=>{
		load.isShow=true
		load.status='loading'
		load.contentText.contentrefresh='正在疯狂加载...'
		
		page++
		let sk = page * 7 //每次从数据库中查询的数据条数
		const DB=await init()
		const res=await DB.database().collection('goods').where({shelves:true}).limit(7).skip(sk).field(obj).get()
	
		data.goods=[...data.goods,...res.data]
		if(res.data.length==0){
			load.status='no-more'	
		}
		return false
	})
	
	import {select_goods} from '@/Acc-config/answer.js'
		
	// 选择关联的商品
	function select(goods){	
		let {goods_title,_id,goods_price,video_url,relation}=goods
		let goods_id=_id
		
		// 判断是否该商品已经被关联
		if(relation){
			uni.$showMsg('商品已经被关联','none')
		}
		else{
			select_goods.value={goods_title,goods_id,goods_price,video_url}

			// 返回上一个页面
			uni.navigateBack({delta:1})
		
		}
	}
	
	// 接受其他页面传过来的数据
	let rel_data=reactive({data:[]})//用于判断该商品是否已经被关联
	onLoad(event=>{
		rel_data.data=JSON.parse(event.goods_id)
	})
	
	watch(()=>data.goods,newValue=>{
		rel_data.data.forEach((item,i)=>{
			// 拿商品id遍历，是否已经被关联
			let index=newValue.findIndex(item=>item._id==rel_data.data[i])
	
			if(index>=0){
				// 该商品已经被关联  
				data.goods[index]['relation']=true// 添加一个字段用于标识该商品是否已经被关联
			}
		})
	})
	
</script>

<style scoped>
.select-goods{
	display: flex;
	height: 200rpx;
	margin: 20rpx;
}
.select-goods image{
	width: 200rpx;
	height: 200rpx;
	display: block;
	border-radius: 10rpx;
}
.select-goods view:nth-child(2){
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-weight: bold;
	padding: 10rpx 0 10rpx 15rpx;
}
.select-goods view text:nth-child(2){
	color: #ed6b51;
	font-weight: bold;
	font-size: 35rpx;
}
.line-clamp{
	-webkit-line-clamp: 2 !important;
}
</style>